<template>
  <el-container class="index-root" v-loading="indexLoading">
    <div class="expand">
      <button class=" ripple" @click="expandHander"></button>
    </div>
    <el-aside :width="expand ? '0' : '200px'">
      <indexAside></indexAside>
    </el-aside>
    <el-container>
      <el-header style="height: 40px;">
        <indexHeader></indexHeader>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <keep-alive :include="[includeRouter]">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import router from "@/router";
import indexHeader from '@/views/guardcat/index/IndexHeader.vue';
import indexAside from '@/views/guardcat/index/IndexAside.vue';

const includeRouter = ref<any>(['Home']);
const expand = ref(false)
const indexLoading = ref(true)

watch(() => router.currentRoute.value, (val) => {
  if (val.meta.keepAlive && includeRouter.value.indexOf(val.name) === -1) {
    includeRouter.value.push(val.name)
  }
}, { immediate: true, deep: true })

const expandHander = () => {
  expand.value = !expand.value;
}

onMounted(() => {
  setTimeout(() => {
    indexLoading.value = false;
  }, 150);
})
</script>

<style scoped lang="scss">
.index-root {
  height: 100%;
  width: 100%;
  position: relative;

  :deep(.el-aside) {
    transition: width 0.3s;
  }

  .expand {
    @include box(20px, 20px);
    @include flex(row, center, center);
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 9999;

    button {
      @include box(100%, 100%);
      background-color: var(--el-color-primary-light-7);
      border-radius: 50%;
      border: 0;
      padding: 0;
    }
  }

  .ripple {
    position: relative;
    overflow: hidden;
  }

  .ripple:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--el-color-primary) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
  }

  .ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
  }
}
</style>